import loadable from '@loadable/component';
import {loadQuery, } from "react-relay/hooks";
import {Environment} from "relay-runtime";
import  PipeMainQuery  from "./__generated__/PipeMainQuery.graphql";
import {useContext} from "react";
import UserContext from "../routing/UserContext";
//import queryString from "querystring";
//import {PreloadableConcreteRequest} from "react-relay/relay-hooks/EntryPointTypes";
import  DetailedGuideQuery  from "./__generated__/PipeLineGuideQuery.graphql";
import  NewPipingUnitQuery  from "./__generated__/NewPipingUnitQuery.graphql";
import {fromObjToInput} from "../common/tool";
import  PipingUnitEsMainQuery  from "./__generated__/PipingUnitEsMainQuery.graphql";

import queryString from "query-string";
/**
 * 管道单元的管理。
 * */
export default function secondRouter(environment: Environment) {
  return (
      [
          {
            path: '/pipeline/:pId',
            //exact: true,  //多层路由嵌套只能去掉 true
            component: loadable(() => import('./PipeMain')),
            prepare: (params:any) => {
                let vars={
                    pipe: params.pId,
                    where: {proj: ''}, after:null, first:3,
                };
              return {
                myQuery: loadQuery(
                    environment as any,
                    PipeMainQuery as any,
                    vars,
                    { fetchPolicy: 'store-or-network' },
                )
              };
            },
            routes:[
                {
                    path: '/pipeline/:pId/new',
                    exact: true,
                    component: loadable(() => import('./NewPipingUnit')),
                    prepare: (params:any) => {
                        console.log(`路由历史NewPipingUnit点击路由params:`, params, window.history.state);
                        return {
                            myQuery: loadQuery(
                                environment as any,
                                NewPipingUnitQuery as any,
                                {
                                    pipe: params.pId,
                                },
                                { fetchPolicy: 'store-or-network' },
                            ),
                        };
                    },
                },
                {
                    path: '/pipeline/:pId/:ppuId',
                    exact: true,
                    component: loadable(() => import('./PipeLineGuide')),
                    prepare: (params:any) => {
                        console.log(`路由历史state7-点击路由params:`, params, window.history.state);
                        return {
                            eqpQuery: loadQuery(
                                environment as any,
                                DetailedGuideQuery as any,
                                {
                                    id: params.ppuId,
                                },
                                { fetchPolicy: 'store-or-network' },
                            ),
                        };
                    },
                },
            ],
          },
          {
              path: '/pipingUnit',
              component: loadable(() => import('./PipingUnitEsMain')),
              prepare: (params:any) => {
                  //若从为对话框返回这里，首先恢复旧的页面查询数据，弹出保存的正在修改的对话框。
                  const qs= queryString.parse(window.location.search);
                  //const field =qs && !!qs.土建施单;
                  //底下这个请求完全可以合并成一个请求包的：从graphql定义入手归并。||{dep:"88909",first:123}
                  //const {dep ,first}=window.history.state?.myQuery; sessionStorage['设备过滤']&&

                  const filt= JSON.parse(sessionStorage['管道单元过滤']??'{}');
                  //let myobj=sessionStorage['myQuery']&&JSON.parse(sessionStorage['myQuery']);
                  //有些是ID携带Name的选择项，需要剔除xxxName部分。后端只需要ID，前端揭示需要名字。组件传递参数2个都要的。
                  const idfilt01= fromObjToInput(filt,'useu','ispu','ispud', 'pipe');
                  const {detailTid, ...idfilt}=idfilt01;
                  const bus= detailTid?.detail;     //等到发送接口才进行转换
                  let vars={
                      where: {useu: qs?.useu , ...idfilt, bus}, after:null, first:2,
                      twhere: {},
                  };
                  console.log("路由loadQuery前面filter=", {useu: qs?.useu , ...idfilt});
                  console.log(`路由DeviceMain 使用单位@:`, params, window.history.state);
                  //提前加载数据汇聚graphQL模式：只能在这里就要预备好各个接口函数所有的参数和数值。 todo: 暂时改成这样的  {fetchPolicy: 'store-or-network'} 'network-only'
                  //底下filter是给主要哪一个查询配合简易搜索框立刻查询用的，两种模式的查询参数注入。尽量DeviceMainQuery保持单一个查询最好，避免参数名字混淆冲突。
                  return {
                      myQuery: loadQuery(
                          environment as any,
                          PipingUnitEsMainQuery as any,
                          vars,
                          { fetchPolicy: 'network-only' },
                      ),
                      filter : {where:{useu: qs?.useu , ...idfilt},
                          offset:0, first:3 }
                  };
              },
              routes:[
                {
                    //这个路由中间的参数/:pId/可以省略用"any"代替
                    path: '/pipingUnit/:pId/:ppuId',
                    exact: true,
                    component: loadable(() => import('./PipeLineGuide')),
                    prepare: (params:any) => {
                        console.log(`路由PipeLineGuide-点击路由params:`, params, window.history.state);
                        return {
                            eqpQuery: loadQuery(
                                environment as any,
                                DetailedGuideQuery as any,
                                {
                                    id: params.ppuId,
                                },
                                { fetchPolicy: 'store-or-network' },
                            ),
                        };
                    },
                },
            ],
          },
      ]
  );
}
